const path = require('path')
const htmlWebPackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: path.join(__dirname, './src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  mode: 'development',
  plugins: [
    new htmlWebPackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    }),
    new VueLoaderPlugin()
  ],
  module: { // 配置所有的第三方加载器
    rules: [ // 所有第三方的 匹配和规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.(jpg|png|bmp|jpeg)$/, use: 'url-loader' },
      { test: /\.(woff2|eot|ttf|otf)$/, use: 'url-loader' },
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  },
  resolve: {
    alias: { // 修改 vue 被导入时候的包的路径
      // 'vue$': 'vue/dist/vue.js'
    }
  }
}

